$(function() {
  //切换图标
  //<!!!给最外面的盒子注册点击事件，可以达到点击一次弹出选框，再点击一个需要更换的图标就再次隐藏的效果>
  $(".icons").on("click", function() {
    $(".icons-contain").toggle();
  });

  //点击图标，切换图标
  $(".icons-inner>.fa").on("click", function() {
    //首先获取点击的那个图标的class，然后存起来
    let classname = $(this).attr("class");
    //然后再选中需要上传的图标位置，通过attr改变其class
    $(".icons>.fa").attr("class", classname);
    //还要把隐藏域的value改变
    $("#classname").val(classname.substring(3));
  });

  //添加点击事件，实现添加效果
  $("#btn-add").on("click", function() {
    //验证非空
    // console.log(utils.validataEmpty("#name"));
    if (utils.validataEmpty("#name")) {
      //提示用户不能为空
      console.log(utils.validataEmpty("#name"));
      $(".modal-body>.container-fluid").text("分类名称不能为空");
      $("#modelId").modal();
      return;
    }
    if (utils.validataEmpty("#slug")) {
      //提示用户不能为空
      $(".modal-body>.container-fluid").text("别名不能为空");
      $("#modelId").modal();
      return;
    }
    //收集表单数据
    let data = $("#form").serialize();

    $.post("/addNewCategory", data, res => {
      let tip = null;
      //   判断发送请求后，是否添加成功
      if (res.code == 200) {
        (tip = "添加成功"), (isSuccess = true);
        // console.log(res);
      } else {
        tip = "添加失败";
      }
      //弹框提示，添加成功
      $(".modal-body>.container-fluid").text(tip);
      $("#modelId").modal();
      resdata = res;
    });
  });
  //   提示框消失后，动态修改页面
  let isSuccess = false;
  let resdata = {};
  $("#modelId").on("hide.bs.modal", () => {
    //判断是否已经添加成功
    if (isSuccess) {
      let html = template("tp", resdata.data);
      $("tbody").append(html);
    }
  });

  //实现删除效果
  //暂时存储用于删除的数据
  let delId = null;
  let delTr = null;

  //<点击删除效果>
  //注册点击事件，点击删除并弹框
  $("tbody").on("click", ".btn-danger", function() {
    //点击之后，把id共享给确认框的数据，并放到外部，然后定位按钮的母元素tr获取一个自定义id属性“data-id”的id
    delTr = $(this).parents("tr");
    //获取母元素的id
    dlId = delTr.attr("data-id");
    // 弹框
    $("#modelIdDel").modal();
  });
  //点击确定
  $("#btn-sure").on("click", function() {
    $.get("/deleteCategoryById", { id: delId }, function(res) {
      if (res.code == 200) {
        delTr.remove();
        $("#modelIdDel").modal("hide");
      }
    });
  });
  //<点击删除效果完成>

  //<实现编辑效果>
  $("tbody").on("click", ".btn-info", function() {
    let id = $(this)
      .parents("tr")
      .attr("data-id");
    $.get("/getCategoryById", { id: id }, function(res) {
      // console.log(res);
      // 这里输出一下res方便下面编程
      //把res回来的数据写入表单之中
      $("#name").val(res.data.name);
      $("#slug").val(res.data.slug);
      // console.log(res.data.slug);
      //修改图标
      $(".icons>.fa").attr("class", "fa " + res.data.classname);
      //同时把图标的隐藏域处理一下
      $("#classname").val(res.data.classname);
      //动态的生成一个隐藏域放在表单里
      //表单里面需要一个id，但是一开始这里面是没有隐藏域可以供id使用的
      //先判断表单的第一个子元素是不是隐藏域
      //<???这步需要看视频，不太懂???>
      let form = $("#form");
      let first = form.children().eq(0);
      if (first.attr("type") === "hidden") {
        //如果是就直接修改
        first.val(res.data.id);
      } else {
        //不是就生成
        let idInput = $(
          '<input type="hidden" name="id" value="' + res.data.id + '">'
        );
        form.prepend(idInput);
      }
      // 把添加按钮隐藏起来，把保存和取消显示
      $("#btn-add")
        .parent()
        .attr("hidden", "true");
      $("#btn-save")
        .parent()
        .removeAttr("hidden");
    });
  });

  //点击保存
  $("#btn-save").on("click", function() {
    //验证非空
    if (utils.validataEmpty("#name")) {
      //提示用户不能为空
      console.log(utils.validataEmpty("#name"));
      $(".modal-body>.container-fluid").text("分类名称不能为空");
      $("#modelId").modal();
      return;
    }
    if (utils.validataEmpty("#slug")) {
      //提示用户不能为空
      $(".modal-body>.container-fluid").text("别名不能为空");
      $("#modelId").modal();
      return;
    }
    //收集数据
    let data = $("#form").serialize();
    //console.log(data)
    if (confirm("是否进行修改")) {
      $.post("/editCategoryById", data, function(res) {
        console.log(res);
        // let editId = $(this)
        //   .parent()
        //   .children()
        //   .eq(0)
        //   .val();
        if (res.code == 200) {
          location.reload();
        }
      });
    }
  });
  //点击取消
  $("#btn-cancel").on("click", () => {
    // 把表单里面的每个输入框清空
    $("#name").val("");
    $("#slug").val("");
    // 把图标恢复默认以及把图标的隐藏域也恢复默认
    $(".icons>fa").attr("class", "fa fa-glass");
    // 默认的样子：  图标的class = fa fa-glass , 隐藏域的默认value = fa-glass
    $("#classname").attr("value", "fa-glass");
    // 把点击编辑的时候动态生成的id的隐藏域移除 - 只要获取表单的第一个子元素移除
    // $("#form")
    //   .children()
    //   .eq(0)
    //   .remove();
    //取消之后，恢复添加的样式
    $("#btn-add")
      .parent()
      .removeAttr("hidden");
    $("#btn-save")
      .parent()
      .attr("hidden", "true");
    $("#btn-cancel")
      .parent()
      .attr("hidden", "true");
  });

  //全选或者全不选
  $("thead input[type=checkbox]").on("click", function() {
    // 得到当前自己de状态
    let status = $(this).prop("checked");
    // 把下面的每一个都设置的和我一样
    $("tbody input[type=checkbox]").prop("checked", status);
    // 把批量删除显示
    status ? delBtn.show() : delBtn.hide();
  });

  let delBtn = $(".page-action>.btn-danger");

  //点选
  $("tbody").on("click", "input[type=checkbox]", function() {
    //判断是否全选
    //选中的个数和所有的个数一致，就是全选了
    //获取所有的tbody里面的checkbox
    let all = $("tbody input[type=checkbox]");
    //获取选中的checkbox
    let checked = $("tbody input[type=checkbox]:checked");

    let isCheckAll = all.length === checked.length;

    $("thead input[type=checkbox]").prop("checked", isCheckAll);
    //当勾选的个数大于1,把批量删除显示
    checked.length > 1 ? delBtn.show() : delBtn.hide();
  });

  //批量删除
  $(".page-action>.btn-danger").on("click", function() {
    //获取勾选的id
    let checked = $("tbody input[type=checkbox]:checked");
    let ids = [];
    checked.each(function(index, ele) {
      let id = $(ele)
        .parents("tr")
        .attr("data-id");
      ids.push(id);
    });
    // console.log(ids);
    if (confirm("是否删除")) {
      $.get("/deleteMultiple", { ids }, res => {
        console.log(res);
        location.reload();
      });
    }
  });
});
